<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #bg {
            position: relative;
            width: 640px;
            height: 640px;
            background: url(images/grassland.png);
            margin: 0 auto;
        }
        
        #img {
            position: absolute;
            top: 0;
            left: 0;
            width: 90px;
            height: 90px;
            background: url(images/right.png) no-repeat;
        }
    </style>
    <script>
        window.onload = function() {
            var img = document.getElementById("img");
            var bg = document.getElementById("bg");
            var speed = 3;
            var dir = 0;
            target = bg.offsetHeight - 90;
            var timer;
            //alert(img.style.offsetTop );
            clearInterval(timer);
            //开启定时器来控制速度
            //薛嘉颖199000951
            timer = setInterval(function() {
                switch (dir) {
                    case 87:
                        //alert("向上移动");
                        img.style.background = "url(images/up.png) no-repeat";
                        if (img.offsetTop > 0) {
                            img.style.top = img.offsetTop - speed + "px";

                        } else {
                            img.style.top = 0;
                        }

                        break;
                    case 68:
                        //alert("向右移动");
                        img.style.background = "url(images/right.png) no-repeat";
                        if (img.offsetLeft < target) {
                            img.style.left = img.offsetLeft + speed + "px";
                        } else {
                            img.style.left = target + "px";
                        }
                        break;
                    case 83:
                        //alert("向下移动");
                        img.style.background = "url(images/down.png) no-repeat";
                        if (img.offsetTop < target) {
                            img.style.top = img.offsetTop + speed + "px";

                        } else {
                            img.style.top = target + "px";
                        }
                        break;
                    case 65:
                        //alert("向左移动");
                        img.style.background = "url(images/left.png) no-repeat";
                        if (img.offsetLeft > 0) {
                            img.style.left = img.offsetLeft - speed + "px";

                        } else {
                            img.style.left = 0;
                        }
                        break;
                }

            }, 3);
            //控制方向
            document.onkeydown = function(event) {
                    event = event || window.event;
                    dir = event.keyCode;
                }
                //按键松开后就停止
            document.onkeyup = function(event) {
                event = event || window.event;
                dir = 0;
            }
        };
    </script>
</head>

<body>
    <p>W：向上移动 &nbsp;D：向右移动&nbsp;S：向下移动&nbsp;A：向左移动</p>
    <div id="bg">
        <div id="img"></div>
    </div>

</body>

</html>